<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 
<script type="text/javascript">
<!--
// 

var tables=new Array();
var column1=new Array();
column1[0]=new Array('show1_1','value1_1');
column1[1]=new Array('show1_2','value1_2');
column1[2]=new Array('show1_3','value1_3');
tables['table1']=column1;


var column2=new Array();
column2[0]=new Array('show2_1','value2_1');
column2[1]=new Array('show2_2','value2_2');
column2[2]=new Array('show2_3','value2_3');
tables['table2']=column2;

function updateTable(targetName,newTable) { 
	
	var columnObj=document.getElementById(targetName);
	// clear all old value
	for(var i=0;i<columnObj.options.length;i++){
		columnObj.options[i]=null;
	}

	var newColumns=tables[newTable];
	if(newColumns==null){
		alert('error value');
		return;
	}
	
	for(var i=0;i<newColumns.length;i++){
		columnObj.options[i]=new Option(newColumns[i][0],newColumns[i][1]);
	}
	
  	
  
}

 
//-->
</script>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Arrange Tables</title>
</head>
	
<body onload="javascript:updateTable('column','table1');">
<div align="center">

<form id="form1" name="form1" method="post" action="">
  <label>
    <select name="table" id="table" onchange="javascript:updateTable('column',this.value);">
      <option  value="table1" selected="selected">table1</option>
      <option value="table2">table2</option>
    </select>
  </label>
  <label>
    <select name="column" id="column">
    </select>
  </label>
</form>
</div>
</body>
</html>

